<template>
    <div>
        <div>
            <div class="web_bg" style="padding-top: 60px;">
                <div class="page animated fadeInUp">
                    <div class="pageasb">
                        <div class="card--cdv2-">
                            <div class="title--2ZrJf">
                                <p style="background-color: none;" class="titleContent">请发布作品</p>
                            </div>
                            <div class="content-body--9vW8R">
                                <div class="form--21LRU">
                                    <div>
                                        <div class="content--lwSUF" style="margin-top: 0px;">
                                            <div class="content-child--cGUw0">
                                                <div>
                                                    <div class="dis--3BXA_">
                                                        <div class="title--c8Htt">作品标题</div>
                                                    </div>
                                                    <el-input v-model="articleTitle" autosize type="textarea"
                                                        placeholder="请输入作品标题" />
                                                    <div class="dis--3BXA_">
                                                        <div class="title--c8Htt">作品内容</div>
                                                    </div>
                                                    <el-input v-model="articleContent" maxlength="500" size="large"
                                                        type="textarea" placeholder="请输入作品详情" show-word-limit
                                                        :rows="8" />

                                                </div>
                                            </div>
                                        </div>

                                        <div class="content--lwSUF" style="margin-top: 24px;">
                                            <div class="title--3bhLp">选择封面</div>
                                            <el-upload class="avatar-uploader" name="file" :headers="headers"
                                                action="/api/media/uploadFile" :show-file-list="false"
                                                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                                <img v-if="imageUrl" :src="fullImageUrl" class="avatar" />
                                                <el-icon v-else class="avatar-uploader-icon">
                                                    <Plus />
                                                </el-icon>
                                            </el-upload>
                                        </div>
                                        <!-- <div class="content--lwSUF" style="margin-top: 24px;">
                                            <div class="title--3bhLp">选择音乐</div>
                                            <div class="content-child--cGUw0">
                                                <div class="container--35IE_">
                                                    <div class="container-left--29fYy">
                                                        <img class="audio-control--1FSrl"
                                                            src="">
                                                        <div class="desc--14I7W">
                                                            点击添加合适作品风格音乐
                                                        </div>
                                                    </div>
                                                    <div class="container-right--CcVcT">
                                                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"
                                                            class="icon--335wN">
                                                            <path
                                                                d="M8.667 2L12 5.333l1.39-1.39c.522-.521.522-1.365 0-1.886L11.944.609a1.333 1.333 0 00-1.885 0L8.668 2zM.499 13.09l1.12-3.924a.667.667 0 01.17-.288L7.667 3 11 6.333l-5.877 5.878a.667.667 0 01-.289.17L.911 13.5a.333.333 0 01-.412-.411z"
                                                                fill="#1C1F23" fill-opacity="0.6"></path>
                                                        </svg>
                                                        <el-upload name="file" class="action--1w7FL" :headers="headers"
                                                            action="/api/media/uploadFile" :show-file-list="false"
                                                            :on-success="handleAvatarSuccess"
                                                            :before-upload="beforeMusicUpload">点击选择音乐</el-upload>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> -->

                                        <div class="sort">
                                            <span class="title--3bhLp">选择分类</span> <br>
                                            <el-check-tag :checked="selectedSort === sort.id"
                                                @change="onSortChange(sort.id)" v-for="sort in webInfoStore.sortInfo"
                                                :key="sort.id" class="sortTag">
                                                {{ sort.sortName }}
                                            </el-check-tag>
                                        </div>

                                        <!-- <div class="label">
                                            <span class="title--3bhLp">选择标签</span> <br>
                                            <el-input v-model="labelName" autosize type="textarea"
                                                placeholder="请输入标签名称" />
                                            <el-input v-model="labelDescription" autosize type="textarea"
                                                placeholder="请输入标签描述" style="margin-top: 10px;" />
                                        </div> -->

                                        <div class=" content-confirm-container--anYOC">
                                            <button class="publishButton" style="width: 120px; height: 32px;"
                                                @click="submitForm">发布
                                            </button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>
<script setup lang='ts'>
    import useUserStore from "@/store/modules/user";
    import useWebInfoStore from "@/store/modules/webinfo";


    import { ElMessage } from 'element-plus'
    import { ref, computed } from 'vue'
    import { reqPublishArticle, reqSubmitPublishArticle } from '@/api/article'

    import { useRouter } from 'vue-router'



    let userStore = useUserStore();
    let webInfoStore = useWebInfoStore()

    const imageUrl = ref('')
    const articleTitle = ref('')
    const articleContent = ref('')
    const music = ref('')

    const userId = ref('')
    const headers = ref({
        "Authorization": userStore.userToken
    })
    // const labelName = ref('')
    // const labelDescription = ref('')
    const selectedSort = ref()

    const submitArticleForm = ref({})



    const fullImageUrl = computed(() => {
        return "api" + imageUrl.value; // 在这里拼接api字符串
    });



    const handleAvatarSuccess = (
        response,
        uploadFile
    ) => {
        imageUrl.value = response.url
        userId.value = response.userId
        // imageUrl.value = URL.createObjectURL(uploadFile.raw)
    }

    const beforeAvatarUpload = (rawFile) => {
        if (rawFile.type !== 'image/jpeg') {
            ElMessage.error('Avatar picture must be JPG format!')
            return false
        } else if (rawFile.size / 1024 / 1024 > 2) {
            ElMessage.error('Avatar picture size can not exceed 2MB!')
            return false
        }
        return true
    }

    const beforeMusicUpload = (rawFile) => {
        if (rawFile.size / 1024 / 1024 > 2) {
            ElMessage.error('music size can not exceed 2MB!')
            return false
        }
        return true
    }

    const submitForm = async () => {

        submitArticleForm.value = {
            articleTitle: articleTitle.value,
            articleContent: articleContent.value,
            articleCover: imageUrl.value,
            music: music.value,
            sortId: selectedSort.value,
            userId: userId.value,
            // labelName: labelName.value,
            // labelDescription: labelDescription.value
        }

        let result = await reqSubmitPublishArticle(submitArticleForm.value)
        if (result.code == 200) {
            const router = useRouter()
            router.push('/') // 进行路由跳转
        } else {
            ElMessage({
                type: 'error',
                message: '提交失败,请联系管理员'
            })
        }
    }



    const onSortChange = (sortId) => {
        if (selectedSort.value === sortId) {
            // 标签已经选中，移除它
            return
        } else {
            // 标签未选中，添加它
            selectedSort.value = sortId
        }
    }

</script>
<style scoped>
    @import "./index.css";

    .label {
        margin-top: 20px;
    }

    .sort {
        margin-top: 20px;
    }

    .sortTag {
        margin-right: 20px;
    }

    .web_bg {


        z-index: -999;
        width: 100%;
        height: 100%;
        background: url(https://s2.loli.net/2023/10/02/UgKNjLrGic13daS.webp);
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-attachment: scroll;
        background-size: auto;
        background-attachment: local;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .page {

        background: rgba(253, 253, 253, 95%);
        backdrop-filter: none;
        border: 1px solid rgba(169, 169, 169, 0.7);
        border-radius: 20px;
        max-width: 1400px;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: box;
        display: flex;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -o-box-flex: 1;
        box-flex: 1;
        -webkit-flex: 1 auto;
        -ms-flex: 1 auto;
        flex: 1 auto;
        margin: 0 auto;
        padding: 40px 15px;
        max-width: 1200px;
        width: 100%;





    }

    .pageasb {
        width: 100%;
        height: 100%;

    }

    @keyframes slide-bottom {
        0% {
            opacity: 0;
            transform: translateY(20%);
        }
    }


    .avatar-uploader .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
</style>